<template>
  <el-row class="form-title">
    <el-col :span="12">
      <span  @click="$router.push('/login')"  class="other-text">登录</span>
    </el-col>
    <el-col :span="12">
      <span  @click="$router.push('/register')" class="register-text">注册</span>
    </el-col>
  </el-row>
  
  <el-col class="form-main"  >
    <el-row class="input-box" type="flex" justify="center">
      <el-col :span="20">
        <el-input
          placeholder="手机号"
          prefix-icon="el-icon-mobile-phone"
          v-model="userInfo.phone">
        </el-input>
      </el-col>
    </el-row>
    <el-row class="input-box" type="flex" justify="center">
      <el-col :span="20">
        <el-input
          show-password
          placeholder="密码"
          prefix-icon="el-icon-lock"
          v-model="userInfo.pwd">
        </el-input>
      </el-col>
    </el-row>
    <el-row class="input-box" type="flex" justify="center">
      <el-col :span="20">
        <el-input
          show-password
          placeholder="确认密码"
          prefix-icon="el-icon-lock"
          v-model="userInfo.rpwd">
        </el-input>
      </el-col>
    </el-row>
    <el-row class="btn-box" type="flex" justify="center">
      <el-col :span="20">
        <el-button  @click="registerVerify" type="primary">注册</el-button>
      </el-col>
    </el-row>
  </el-col>

</template>

<script type="text/ecmascript-6">
  import { defineComponent,reactive} from "vue";
  import { useRouter } from "vue-router";
  import { ElMessage } from 'element-plus'
  import { apiRegister } from '../../api/index'

  export default defineComponent({
      name:"Register",

      setup(){


        const router = useRouter()

        const userInfo = reactive({
          phone:null,
          pwd:null,
          rpwd:null
        })



        async function registerVerify(){
          let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
          let { phone,pwd,rpwd } = userInfo
          if ( !pwd || !rpwd || !phone.trim()){
            ElMessage.error('账号密码不能为空!');
            return
          }
          if ( !reg.test(phone) ){
            ElMessage.error('请输入正确的手机格式!');
            return
          }
          if( pwd != rpwd){
            ElMessage.error('两次密码不一致!');
            return
          }

          let result = await apiRegister(phone,pwd)
          console.log(result)
          if (result.err_code == 200){

            ElMessage.success({
              message: '注册成功!',
              type: 'success'
            });
            router.push("/login")
          }else{
            ElMessage.error(result.message);
          }

        }
        return {
          userInfo,
          registerVerify
        }
      }
      
  })
</script>

<style scoped lang="less" >
  @import url("./login_home.less");
</style>
